import React, { FC, useContext, useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { LoginContext } from '../../LoginContext';
import { useContent } from './useContent';
import MyInput from '../../TopContainer/LoginForm/MyInput/MyInput';
import OPerationButton from './OPerationButton/OPerationButton';

export interface IProps extends ICompProps {}
Content.defaultProps = {} as Partial<IProps>;
function Content(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('Content', className);
    const { imgCaptcha, setImgCaptcha, loginForm, closeImgCaptcha } = useContext(LoginContext);
    const [captchaText, setCaptchaText] = useState('');
    const { canCel, confirm } = useContent({ setImgCaptcha, closeImgCaptcha, setCaptchaText });

    //图形验证码
    const change = (val) => {
        setCaptchaText(val);
    };

    return (
        <RootView className={localClassName} style={style}>
            <View className="Content_wrap">
                <View className="top">
                    <Text className="codeTitle">验证码：</Text>
                    <MyInput className="input" value={captchaText} onChange={change}></MyInput>
                </View>
                <View className="imgCaptcha" dangerouslySetInnerHTML={{ __html: `${imgCaptcha}` }}></View>
                <OPerationButton
                    canCel={canCel}
                    confirm={() =>
                        confirm(loginForm.getFieldsValue(['phoneNumber']).phoneNumber, captchaText)
                    }></OPerationButton>
            </View>
        </RootView>
    );
}
export default React.memo(Content as FC<IProps>);
const RootView = styled(View)`
    &.Content {
        width: 640px;
        position: absolute;
        top: 20vh;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        border-radius: 26px;
        padding: 40px 30px;
        .top {
            display: flex;
            .codeTitle {
                font-size: 30px;
                display: flex;
                align-items: center;
                font-weight: 500;
            }
            .input {
                flex: 1;
            }
        }
        .imgCaptcha {
            text-align: center;
            margin: 20px 0;
        }
    }
`;
